<template>
	<view class="home-page">
		<official-account ></official-account>
		<div class="page-header" style="padding-top: 20rpx;">
			<image class="home-bj" :src="imgurl+'/WeChat/pic12.png'" mode="widthFix"></image>
			<!-- <div class="page-title">冲吧！小水滴</div> -->
			<div class="notice-box">
				<div class="notice-icon flex-grow-0">
					<image :src="imgurl+'/WeChat/laba.png'" mode=""></image>
				</div>
				<swiper class="swiper flex-grow-1" circular autoplay="true" interval="3000" vertical="true">
					<swiper-item v-for="item in articleList" :key="item.id" @click="showparticulars(item)">
						<view class="swiper-item break1">{{item.title}}</view>
					</swiper-item>
				</swiper>
			</div>
			<div class="integral-box flex-between">
				<view class="user-box flex-row">
					<view class="user-pic">
						<view class="userimg">
							<image :src="isauthorized?imgurl+userinfo.avatar:imgurl+'/WeChat/user.png'"
								mode="aspectFill"></image>
						</view>
						<image class="ranking" v-if="userinfo.userTop<4 && userinfo.userTop!=0"
							:src="imgurl+'/WeChat/ranking'+userinfo.userTop+'.png'" mode="widthFix"></image>
					</view>
					<view class="userName">
						<view class="title">{{userinfo.username}}</view>
						<view class="lv" v-if="userinfo.level">LV:{{userinfo.level}}</view>
					</view>
				</view>
				<view class="circle-box" @click="clickStep">
					<cCircle v-if="showStepNum" :percent="speed" :circleWidth="10" :size="266" circleColor="#00412d"
						:animation="true" :animationSpeed="100">
						<view slot="content" class="jfbox">
							<view class="number">
								{{stepNum===''?'未获取':stepNum}}
							</view>
							<view class="jf-name">
								{{stepNum===''?'':'今日步数'}}
							</view>
						</view>
					</cCircle>
					<view class="btn">
						<image :src="imgurl+'/WeChat/bj.png'" mode="aspectFill"></image>
						<text>点击将步数兑换积分</text>
					</view>
				</view>
			</div>
			<view class="grade-module">
				<view class="grade-progress">
					<view class="lv">LV{{userinfo.level||0}}</view>
					<view class="progress">
						<view class="progress-line" :style="'width: '+runspeed+'%;'"></view>
						<view class="grade-ratio">
							{{userinfo.score||0}}/{{levelNum}}
						</view>
					</view>
					<view class="lv">LV{{userinfo.level?userinfo.level+1:1}}</view>
				</view>
				<view class="upgrade flex-y-center" v-if="isupgrade" @click="getCard()">
					<image class="upgrade-img" :src="imgurl+'/WeChat/pic5.png'" mode=""></image>
					<!-- 升级成功才显示这个 -->
					<view class="upgrade-cont">
						<view class="h3">
							恭喜您升LV{{userinfo.level||0}}
						</view>
						<view class="ds">
							点击领取奖励
							<text style="margin-left: 5rpx;">▶</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 步数 -->
			<view class="step-nbox">
				<view class="setp-img">
					<image :src="imgurl+'/WeChat/pic8.png'" mode=""></image>
				</view>
				<view class="seet-cont flex-grow-1">
					<view class="flex-between flex-y-bottom">
						<text class="h1">{{userinfo.nowDayNum}}</text>
						<view class="h1-right flex-row flex-y-bottom">
							{{userinfo.nowDayRice||'0'}}
							<view class="text">{{userinfo.Company||'m'}}</view>
						</view>
					</view>
					<view class="ds  flex-between">
						<text>{{userinfo.nowDayNum?'今日步数':''}}</text>
						<text>{{userinfo.nowDayNum?'今日您步行约':'未捐步'}}</text>
					</view>
				</view>
			</view>
		</div>

		<!-- 卡片 -->
		<view class="card-senction">
			<view class="card-header">
				<text class="title flex-grow-1">我的卡片</text>
				<view class="more" @click="Finallydraw()">
					<text>终极抽奖</text>
					<image :src="imgurl+'/WeChat/san.png'" mode=""></image>
				</view>
			</view>
			<view class="card-list flex-between">
				<view class="card-item" v-for="(v,k) in cardList" :key="v.id" @click="showCard(v)">
					<view class="card-img">
						<image :src="v.card_url?imgurl+v.card_url:imgurl+'/WeChat/pic12.png'" mode="" v-if="v.have">
						</image>
						<image class="suo" :src="imgurl+'/WeChat/suo.png'" mode="" v-else>
						</image>
						<view class="card-number">{{v.have}}</view>
					</view>
					<view class="card-name">
						{{v.card_name}}
					</view>
				</view>
			</view>
		</view>
		<view class="flow-list flex-between">
			<navigator url="/pages/activityDs/activityDs" class="flow-item">
				<image :src="imgurl+'/WeChat/pic9.png'" mode=""></image>
				<view class="name">
					活动详情
				</view>
			</navigator>
			<navigator url="/pages/my-prize/my-prize" class="flow-item">
				<image :src="imgurl+'/WeChat/pic10.png'" mode=""></image>
				<view class="name">
					我的奖品
				</view>
			</navigator>
			<navigator url="/pages/code/code" class="flow-item">
				<image :src="imgurl+'/WeChat/pic11.png'" mode=""></image>
				<view class="name">
					积分兑换
				</view>
			</navigator>
		</view>
		<uni-popup ref="popup" background-color="none">
			<view class="popup-content" @click="gotohome()">
				<view class="grade">
					<view class="grade-number">
						{{userinfo.nowDayNum}}
					</view>
					<view class="grade-title">
						积分
					</view>
					<image :src="imgurl+'/WeChat/pic4.png'" mode=""></image>
				</view>
				<view class="h1">
					兑换成功
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="cardpopup" background-color="none">
			<view class="popup-content cardpopup" @click="gotodraw()">
				<view class="card-img">
					<image :src="imgurl+(cardUrl?cardUrl:'/WeChat/card.png')" mode="aspectFill"></image>
				</view>
				<view class="h1">
					获得{{cardnum}}
				</view>
				<view class="ds">
					点击前往抽奖
				</view>
			</view>
		</uni-popup>
		<!-- 普通卡片详情 -->
		<uni-popup ref="cardds" background-color="none">
			<view class="popup-content cardpopup">
				<view class="card-img">
					<image :src="imgurl+(cardInfo.card_max_url?cardInfo.card_max_url:'/WeChat/card.png')"
						mode="aspectFill"></image>
				</view>
				<view class="h1">
					{{cardInfo.card_name}}
				</view>
			</view>
		</uni-popup>
		<foo-bar @toIndex="toIndex"></foo-bar>
		<!-- 活动详情弹窗 -->
		<uni-popup ref="particularspop" background-color="none">
			<view class="particularspop">
				<view class="h1">{{particulars.title}}</view>
				<view class="time">更新时间{{particulars.update_time}}</view>
				<bctos-rich-text :nodes="particulars.content"></bctos-rich-text>
			</view>
		</uni-popup>

		<!-- 15级完成之后出现弹窗 -->
		<uni-popup ref="flybook" background-color="none">
			<view class="flybook">
				<view class="flybook-img">
					<image :src="imgurl+'/WeChat/flybook.png'" mode="widthFix"></image>
				</view>
				<view class="h1">
					恭喜通关
				</view>
				<view class="ds">感谢你的坚持！</view>
				<view class="ds">请持兑换码【{{userinfo['fy_code']}}】</view>
				<view class="ds">飞书搜索【冲吧！小水滴活动热线】</view>
				<view class="ds">点击【奖品兑换】获取【勋章&头像框】</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import fooBar from '../../components/yx-bottomBar/yx-bottomBar'
	import cCircle from "../../components/Your_Exios-Circle/Your_Exios-Circle"
	export default {
		data() {
			return {
				title: 'Hello',
				background: ['color1', 'color2', 'color3'],
				cardList: [],
				isupgrade: false, //控制是否升级
				isauthorized: (uni.getStorageSync('token') ? true : false),
				userinfo: {
					id: 0,
					username: '-',
					avatar: '',
					level: '',
					score: '',
					nowDayNum: 0,
					nowDayRice: '0',
					Company: 'm',
					userTop: 99
				},
				imgurl: this.serverURL,
				articleList: [],
				speed: 0,
				levelNum: '',
				runspeed: '',
				stepNum: '',
				stepDate: '',
				cardnum: '',
				cardUrl: '',
				showStepNum: true,
				cardInfo: {},
				particulars: {},
			}
		},
		components: {
			cCircle,
			fooBar
		},
		onShow() {},
		onReady() {
			if (uni.getStorageSync('token')) {
				this.userinfo = uni.getStorageSync('token');
			}
			//this.$refs.cardpopup.open('center')
			this.getStep()
			this.getIndexDate()
		},
		created() {},
		onLoad() {},
		methods: {
			getStep() {
				let _that = this;
				uni.login({
					success(r) {
						wx.getWeRunData({
							success: (werunData) => {
								uni.request({
									url: _that.serverURL + "/index/index/getUserDecrypt",
									method: "POST",
									data: {
										encryptedData: werunData.encryptedData,
										iv: werunData.iv,
										code: r.code,
										uid: _that.userinfo['id'],
									},
									success(res) {
										_that.stepDate = res.data.date;
										_that.stepNum = res.data.step;
									},
									fail(fail) {
										uni.hideLoading();
									}
								});
							}
						})
					}
				})
			},
			getIndexDate() {
				let that = this;
				//that.$refs.flybook.open('center')
				that.showStepNum = false
				uni.request({
					url: that.serverURL + "/index/index/index",
					method: "POST",
					data: {
						id: that.userinfo['id']
					},
					success(res) {
						that.showStepNum = true
						that.articleList = res.data.article;
						that.cardList = res.data.card;
						that.speed = res.data.speed;
						that.levelNum = res.data.levelNum;
						that.runspeed = res.data.runspeed;
						if (res.data.userInfo) {
							that.userinfo = res.data.userInfo;
							that.userinfo.level = parseInt(that.userinfo.level)
							that.userinfo.userTop = parseInt(res.data.userTop)
							if (that.userinfo.level == 15) {
								that.$refs.flybook.open('center')
							}
						}
					},
				});
			},
			clickStep() {
				let that = this;
				if (!that.isauthorized) {
					uni.showModal({
						title: '未登录',
						content: '是否去登录，加入活动',
						success(res) {
							if (res.confirm) {
								uni.reLaunch({
									url: `/pages/home/home?index=4`
								})
							}
						}
					})
				} else {
					if (that.userinfo.nowDayNum > 0) {
						uni.showModal({
							title: '不可兑换',
							content: '今日已兑换' + that.userinfo.nowDayNum + '积分',
							showCancel: false
						})
					} else {
						if (that.stepNum == 0) {
							uni.showModal({
								title: '不可兑换',
								content: '当前步数为0',
								showCancel: false
							})
							return;
						}
						uni.showModal({
							title: '今日步数：' + that.stepNum,
							content: '每日仅可兑换一次，是否兑换积分',
							cancelText:'取消',
							confirmText:'兑换',
							success(res) {
								if (res.confirm) {
									uni.request({
										url: that.serverURL + "/index/index/subUserStep",
										method: "POST",
										data: {
											id: that.userinfo['id'],
											stepDate: that.stepDate,
											stepNum: that.stepNum
										},
										success(res) {
											if (res.data.code == 1) {
												that.getIndexDate();
												if (res.data.cardnum > 0) {
													//that.toggle('center');
													that.cardnum = res.data.cardName;
													that.cardUrl = res.data.cardUrl;
													that.isupgrade = true;
													that.$refs.cardpopup.open('center')
												}
											}
										},
									});
								}
							}
						})
					}
				}
			},
			toggle(type) {
				uni.showLoading({
					title: '加载中'
				});
				// 防请求接口
				setTimeout(() => {
					uni.hideLoading()
					this.$refs.popup.open(type)
				}, 1000)

			},
			// 升级领取卡片
			getCard() {
				uni.showLoading({
					title: '加载中'
				});
				// 防请求接口
				setTimeout(() => {
					uni.hideLoading()
					this.$refs.cardpopup.open('center')
				}, 1000)
			},
			//前往抽奖
			gotodraw() {
				this.$emit('todraw', {
					index: 1,
					drawtype: 1
				})
			},
			//显示卡片
			showCard(v) {
				if(v.have>0){
					this.cardInfo = v;
					this.$refs.cardds.open('center')
				}else{
					uni.showToast({
						title:'未获得该卡片',
						icon:'none'
					})
				}
			},
			// 最终抽奖
			Finallydraw() {
				// index 0是首页 1是抽奖 3是排名 5是我的 
				uni.setStorageSync('drawtype', 2)
				this.$emit('todraw', {
					index: 1,
					drawtype: 2
				})
				// uni.redirectTo({
				// 	url: '/pages/draw/draw?type=2'
				// })
				// uni.reLaunch({
				// 	url:`/pages/home/home?index=${1}`
				// })
			},
			showparticulars(item) {
				this.particulars = item
				this.$refs.particularspop.open('center')
			}
		}


	}
</script>

<style lang="less" scoped>
	.page-header {
		position: relative;
		padding: 0px 40rpx;
		box-sizing: border-box;
	}

	.home-bj {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		z-index: -1;
	}

	.page-title {
		font-size: 48rpx;
		color: #000;
		font-weight: bold;
		margin-bottom: 40rpx;
		text-align: center;
	}

	.notice-box {
		width: 670rpx;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		margin: 0px auto;
		background: #00412d;
		border-radius: 50rpx;
		padding: 0px 16rpx;
		box-sizing: border-box;
		box-shadow: 0px 10rpx 24rpx 0px rgba(0, 0, 0, 0.1);
		align-items: center;

		.notice-icon {
			width: 35rpx;
			height: 29rpx;
			margin-right: 19rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.swiper {
			height: 100%;
			width: 100%;
			color: #fff;
			font-size: 24rpx;
		}
	}

	.integral-box {
		margin-top: 38rpx;
		display: flex;

		.user-pic {
			width: 125rpx;
			height: 125rpx;
			position: relative;
		}

		.userimg {
			width: 125rpx;
			height: 125rpx;
			border-radius: 20rpx;
			border: 4rpx solid #fff;
			overflow: hidden;
			box-sizing: border-box;



		}

		.ranking {
			position: absolute;
			left: 0px;
			top: 80rpx;
			width: 125rpx;
			// height: 106rpx;
		}
	}

	.userName {
		margin-top: 25rpx;
		margin-left: 25rpx;
		color: #fff;

		.title {
			font-size: 32rpx;
			font-weight: bold;
		}

		.lv {
			font-size: 24rpx;
			margin-top: 10rpx;
		}
	}

	.circle-box {
		width: 309rpx;
		height: 309rpx;
		border-radius: 50%;
		background: #fff;
		padding: 10rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.jfbox {
		width: 245rpx;
		height: 245rpx;
		background-image: linear-gradient(to top, #047449, #00412d);
		justify-content: center;
		align-items: center;
		display: flex;
		border-radius: 50%;
		flex-direction: column;
		color: #fff;
		box-shadow: 0px 10rpx 24rpx 0px rgba(0, 0, 0, 0.1);

		.number {
			font-size: 67rpx;
		}

		.jf-name {
			font-size: 31rpx;
		}
	}

	.btn {
		position: absolute;
		bottom: -35rpx;
		left: 50%;
		transform: translate(-50%, 0);
		width: 288rpx;
		height: 70rpx;
		border-radius: 70rpx;
		box-shadow: 0px 10rpx 24rpx 0px rgba(0, 0, 0, 0.1);
		font-size: 24rpx;
		line-height: 70rpx;
		font-weight: bold;
		color: #fedd2b;
		overflow: hidden;
		text-align: center;

		image {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: -1;
		}
	}

	.grade-module {
		background: #00412d;
		border-radius: 5rpx;
		padding: 28rpx 22rpx;
		border-radius: 20rpx;
		margin-top: 61rpx;

		.upgrade {
			color: #fff;
			margin-top: 13rpx;

			.upgrade-img {
				width: 79rpx;
				height: 89rpx;
				margin-right: 27rpx;
			}

			.h3 {
				font-weight: bold;
			}

			.ds {
				font-size: 24rpx;
			}

		}
	}

	.grade-progress {
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.lv {
			font-size: 28rpx;
			font-weight: bold;
			color: #fff;
		}

		.progress {
			margin: 0px 20rpx;
			width: 503rpx;
			height: 54rpx;
			padding: 4rpx;
			box-sizing: border-box;
			background: #fff;
			color: #333;
			font-weight: bold;
			position: relative;
			border-radius: 54rpx;
		}

		.progress-line {
			width: 50%;
			height: 45rpx;
			border-radius: 45rpx;
			line-height: 45rpx;
			text-align: center;
			background-image: linear-gradient(to right, #047449, #00412d);
			transform: all 0.5s;
		}

		.grade-ratio {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			text-align: center;
			z-index: 3;
			line-height: 54rpx;
		}
	}

	.step-nbox {
		background: #eff3f8;
		border-radius: 20rpx;
		height: 188rpx;
		width: 100%;
		box-shadow: 0px 10rpx 24rpx 0px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		padding: 0px 36rpx;
		margin-top: 40rpx;
		box-sizing: border-box;

		.setp-img {
			width: 97rpx;
			height: 109rpx;
			margin-right: 30rpx;
		}

		.seet-cont {
			font-weight: bold;

			.h1 {
				display: flex;
				font-size: 67rpx;
			}

			.h1-right {
				font-size: 37rpx;
				justify-content: end;

				.text {
					font-size: 17rpx;
					line-height: 17px;
				}
			}
		}

		.ds {
			font-size: 20rpx;
			color: #333;
		}
	}

	.card-senction {
		width: 670rpx;
		margin: 0px auto;

		.card-header {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			padding: 40rpx 20rpx;

			.title {
				font-size: 38rpx;
				font-weight: bold;
			}

			.more {
				font-size: 24rpx;
				color: #333;

				image {
					width: 24rpx;
					height: 24rpx;
					display: inline-block;
					margin-left: 10rpx;
				}
			}
		}
	}

	.card-list {
		background: #eff3f8;
		padding: 0px 20rpx;
		box-sizing: border-box;
		box-shadow: 0px 10rpx 24rpx 0px rgba(0, 0, 0, 0.1);
		display: flex;


		.swiper {
			height: 259rpx;
		}

		.card-item {
			padding: 20rpx 0px;
		}

		.card-img {
			width: 111rpx;
			height: 158rpx;
			background: #d3eac7;
			border-radius: 18rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0px 10rpx 24rpx 0px rgba(0, 0, 0, 0.1);

			.card-number {
				position: absolute;
				top: -15rpx;
				right: -15rpx;
				width: 32rpx;
				height: 32rpx;
				background-image: linear-gradient(to right, #047449, #00412d);
				text-align: center;
				line-height: 32rpx;
				font-size: 15rpx;
				font-weight: bold;
				border-radius: 50%;

			}

		}

		.card-name {
			text-align: center;
			margin-top: 17rpx;
			font-size: 24rpx;
			font-weight: bold;
		}

		.suo {
			width: 45rpx;
			height: 54rpx;
		}
	}

	.flow-list {
		width: 670rpx;
		margin: 58rpx auto;
		background: #eff3f8;
		padding: 36rpx 20rpx;
		box-sizing: border-box;
		box-shadow: 0px 10rpx 24rpx 0px rgba(0, 0, 0, 0.1);

		.flow-item {
			image {
				width: 139rpx;
				height: 136rpx;
			}

			.name {
				font-size: 24rpx;
				font-weight: bold;
				margin-top: 7rpx;
			}
		}
	}

	// 弹窗
	.popup-content {
		flex-direction: column;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 486rpx;
		height: 618rpx;
		border-radius: 30rpx;
		overflow: hidden;
		background: #fff;

		.grade {
			width: 315rpx;
			height: 315rpx;
			border-radius: 50%;
			background-image: linear-gradient(to right, #047449, #00412d);
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			image {
				width: 107rpx;
				height: 108rpx;
				position: absolute;
				bottom: 0px;
				right: 10rpx;
			}

			.grade-number {
				font-size: 74rpx;
				font-weight: bold;
			}
		}

		.h1 {
			margin-top: 62rpx;
			font-size: 45rpx;
			font-weight: bold;
		}

		.ds {
			font-size: 28rpx;
			margin-top: 10rpx;
		}

		.card-img {
			width: 300rpx;
			height: 422rpx;
			overflow: hidden;
		}
	}

	.cardpopup {
		.h1 {
			margin-top: 42rpx;
			font-size: 45rpx;
			font-weight: bold;
		}
	}

	.particularspop {
		width: 600rpx;
		height: 800rpx;
		border-radius: 30rpx;
		overflow-y: scroll;
		background: #fff;
		padding: 0px 20rpx;
		box-sizing: border-box;

		.h1 {
			font-weight: bold;
			font-size: 32rpx;
			line-height: 80rpx;
			text-align: center;
		}

		.time {
			color: #666;
			text-align: center;
			margin-bottom: 10rpx;
			font-size: 24rpx;
		}
	}

	.flybook {
		background: #FFF;
		border-radius: 20rpx;
		padding: 50rpx;
		text-align: center;
		box-sizing: border-box;
		width: 500rpx;

		.h1 {
			font-size: 36rpx;
			font-weight: bold;
			margin-top: 30rpx;

		}

		.ds {
			margin-top: 20rpx;
			font-size: 24rpx;
			text-align: center;
			color: #666;
		}
	}

	.flybook-img {
		width: 200rpx;
		height: 200rpx;
		margin: 0px auto;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>
